<template>
<scroll-view :srcoll-y="true">

<view class="change">
  <view class="change-pro"> 
    <img 
    style="width:5.5em;height:5.5em;border-radius:50%;" 
    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0926%252F47f59dc0j00r00u8i000sc000u000u0c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658126433&t=b5dbc0efeca75405932bd51692e25546">
   
  </view>

  <!-- 修改信息 -->
  <van-cell-group inset class="edit-info">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <view class="radio-box">
                <text>姓名</text>
                <text>{{name}}</text>
                  <!-- <input style="text-align:right" v-model="name"> -->
              </view>
            </template>
          </van-cell>

          <van-cell>
            <template #title>
              <view class="radio-box">
                <text>手机号</text>
                <text>{{telephone}}</text>
              </view>
            </template>
          </van-cell>

          <van-cell>
            <template #title>
              <view class="radio-box">
                <text>性别</text>
                <text>{{gender}}</text>
              </view>
            </template>
          </van-cell>
        <van-cell>
            <template #title>
              <view class="radio-box">
                <text>婚否</text>
                <text>{{married}}</text>
              </view>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <view class="birth">
                <text>出生日期</text>
                <text>{{date}}</text>
              </view>
            </template>

          </van-cell>
          <van-cell>
            <template #title>
              <view class="birth">
                <text>职业</text>
                <text>{{job}}</text>
              </view>
            </template>
          </van-cell>

          <van-cell>
            <template #title>
              <view class="birth">
                <text>年龄</text>
                <text>20</text>
              </view>
            </template>
          </van-cell>
    </van-cell-group>

    <view style="width:50%;margin-top: 1em;">
      <van-button 
       @click="commitInfo"
        size="large" 
        round color="linear-gradient(to left top, #fff,#ff6781)">
        修改信息
      </van-button>
    </view>


   </view>
  </scroll-view>
 </template>

<script>
export default {
  
   data() {
     return{
        name:'快诊小宝',
        telephone:'18178744263',
        gender:'男',
        married:'未婚',
        date:'2021-12-18',
        job:'学生/教育业'
     } 
  },
  
  onShow(){
      //获取Storage里的个人信息
      let t = this; 
      uni.getStorage({key:'name',success:function(e){t.name=e.data}})
      uni.getStorage({key:'telephone',success:function(e){t.telephone=e.data}})
      uni.getStorage({key:'gender',success:function(e){
        switch(e.data){
          case 0:
            t.gender = '男';
            break;
          case 1:
            t.gender = '女';
            break;
        }        
      }})
      uni.getStorage({key:'married',success:function(e){
        switch(e.data){
          case 0:
            t.married = '未婚';
            break;
          case 1:
            t.married = '已婚';
            break;
        }
      }})
      uni.getStorage({key:'birthday',success:function(e){t.date=e.data}})
      uni.getStorage({key:'job',success:function(e){t.job=e.data}})
  },
  computed: {
  },

  methods:{
  }
}
</script>

<style scoped>
.birth {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.radio-box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.edit-info {
  margin-top:1em;
  width:90%;
}
.change-name-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.change-name {
  width: 50%;
  margin-left: 35%;

}

.change {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.change-pro {
    position: relative;
    /* margin-left:center; */
    margin-top:2rem;
    z-index: 0;
}
</style>